<template>
	<view class="ayi-page tab-page">
		<navigation :isBack="false" titleTintColor="#fff">
			<image slot="nav_topbar_title_img" style="height: 40px;" mode="aspectFit" src="/static/img/logo.png"></image>
			<text slot="iconfont" v-show="isShowSwiper" class="iconfont" @click="hideSlider()">&#xecaa;</text>
			<text slot="iconfont" v-show="!isShowSwiper" class="iconfont" @click="hideSlider()">&#xecab;</text>
		</navigation>
		<swiper class="swiper" v-show="isShowSwiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item class="swiper-item" v-for="(item, index) in bannerArr" :key="index">
				<view style="padding: 20rpx;"><img class="s-i-img" :src="item.img" /></view>
			</swiper-item>
		</swiper>
		<view class="home-notice">
			<i class="iconfont h-n-icon" style="font-size: 40rpx;">&#xe609;</i>
			<view class="h-n-content"><rich-text class="notice-rich-text" :nodes="noticeArr"></rich-text></view>
		</view>
		<view class="home-tab-menu">
			<view class="h-t-m-item" @click="switchMenuTab(0)" :class="showMenu == 0 ? 'active' : ''">
				<text class="h-itme-tit">热门彩种</text></view>
			<view class="h-t-m-item" @click="switchMenuTab(1)" :class="showMenu == 1 ? 'active' : ''">
				<text class="h-itme-tit">所有彩种</text></view>
			<view class="h-t-m-item" @click="switchMenuTab(2)" :class="showMenu == 2 ? 'active' : ''">
				<text class="h-itme-tit">我的关注</text></view>
		</view>
		<view class="home-menu-grid">
			<view class="hot" :class="showMenu == 0 ? 'active' : ''">
				<uni-grid :column="2" :show-border="false">
					<uni-grid-item style="width: 50%;" v-for="(item, index) in lot" :key="index" :class="index % 2 == 0 ? 'menu-right-border' : ''">
						<homeMenuItem :keyCode="item.key" :lotteryId="item.lotteryId" :timer="item.closeTime" :lotName="item.name" :imgSrc="url + item.img"></homeMenuItem>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="hot" :class="showMenu == 1 ? 'active' : ''">
				<uni-grid :column="2" :show-border="false">
					<uni-grid-item style="width: 50%;" v-for="(item, index) in lot1" :key="index" :class="index % 2 == 0 ? 'menu-right-border' : ''">
						<homeMenuItem :keyCode="item.key" :lotteryId="item.lotteryId" :timer="item.closeTime" :lotName="item.name" :imgSrc="url + item.img"></homeMenuItem>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="hot" :class="showMenu == 2 ? 'active' : ''">
				<uni-grid :column="2" :show-border="false">
					<uni-grid-item style="width: 50%;" v-for="(item, index) in lot2" :key="index" :class="index % 2 == 0 ? 'menu-right-border' : ''">
						<homeMenuItem :keyCode="item.key" :lotteryId="item.lotteryId" :timer="item.closeTime" :lotName="item.name" :imgSrc="url + item.img"></homeMenuItem>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<tabbarMask></tabbarMask>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid/uni-grid-item.vue';
import homeMenuItem from '@/components/home-grid-item.vue';
import tabbarMask from '@/components/tabbar-mask.vue';

import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { uniGrid, uniGridItem, homeMenuItem, navigation, Tabbar, tabbarMask },
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			bannerArr: [], //滚动的图片
			lot: [], //热门彩种
			lot1: [], //所有彩种
			lot2: [], //已经存储的彩种
			url: Config.URL,
			showMenu: 1,
			allTime: {},
			isClearTimeOut: false,
			clearTimeOutArr: [],
			isShowMask: true,
			noticeArr: '', //公告的数据
			noticeTimer: '', //公告滚动的计时器
			isShowSwiper:true,//是否显示banner
		};
	},
	mounted() {
		let that = this;
		this.$store.commit('setTabbarIndex', 3);
		uni.$on('startMenuTimer', function() {
			that.timeNet();
			uni.$emit('startTimer');
		});
		uni.$on('isClearTimeOut', function(data) {
			that.clearTimeoutFun();
			that.isClearTimeOut = data.isClear;
		});
	},
	onLoad() {
		this.getSliderData();
		this.getMenuData();
		this.noticeData();
	},
	onShow() {
		console.log('首页的显示！！！！');
	},
	onHide() {
		console.log('首页的隐藏！！！！ ');
	},
	methods: {
		getSliderData() {
			//获取首页滚屏
			let that = this;
			Net.ayiHttp(
				URL.USER_BANNER,
				'',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.bannerArr = data;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		getMenuData() {
			//获取菜单
			let that = this;
			Net.ayiHttp(
				URL.USER_MAIN_HALL,
				'',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						//将菜单数据给存储下来
						VueTools.setStorageSync(Config.ALL_LOT_STORE_KEY, data);
						console.log('处理好了的', data);
						for (let tempData in data.lots) {
							data.lots[tempData]['closeTime'] = '';
							that.lot1.push(data.lots[tempData]);
							if (data.lots[tempData].type_code == 1) {
								that.lot.push(data.lots[tempData]);
							}
							// that.store.get(Config.IS_LOGIN_STORE_KEY).then(data => {
							// 	if (!ToolService.isEmpty(data)) {
							// 		//未登录进行登陆
							// 		if (data.lots[tempData].is_follow == 1) {
							// 			that.lots2.push(data.lots[tempData]);
							// 		}
							// 	}
							// });
						}
						console.log('热门:', that.lot);
						that.timeNet();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
					uni.stopPullDownRefresh()
				},
				function(err) {
					console.log('error:', err);
					uni.stopPullDownRefresh()
				}
			);
		},
		switchMenuTab(index) {
			this.showMenu = index;
		},
		timer() {
			let that = this;
			that.clearTimeoutFun();
			let tempTimer = setTimeout(function() {
				clearTimeout(tempTimer);
				that.clearTimeoutFun();
				if (!that.isClearTimeOut) {
					uni.$emit('clearMenuTimer');
					that.timeNet();
					uni.$emit('startTimer');
				}
			}, 10000);
			this.clearTimeOutArr.push(tempTimer);
		},
		clearTimeoutFun() {
			for (let item in this.clearTimeOutArr) {
				clearTimeout(this.clearTimeOutArr[item]);
			}
			this.clearTimeOutArr = [];
		},
		timeNet() {
			//获取彩种菜单的时间
			let that = this;
			Net.ayiHttp(
				URL.USER_TIME,
				'',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let tt = Tools.aesDecodeToJson(res.data);
						that.allTime = tt;
						console.log('所有时间:', tt);
						//热门彩种的时间处理
						for (let t1 in that.lot) {
							that.lot[t1]['closeTime'] = '';
							for (let t11 in tt.times) {
								if (that.lot[t1].key == t11) {
									that.lot[t1]['closeTime'] = tt.times[t11] - tt.now;
								}
							}
						}
						//所有彩种时间处理
						for (let t1 in that.lot1) {
							that.lot1[t1]['closeTime'] = '';
							for (let t11 in tt.times) {
								if (that.lot1[t1].key == t11) {
									that.lot1[t1]['closeTime'] = tt.times[t11] - tt.now;
								}
							}
						}
						//我的关注的时间处理
						// for (let t1 in that.lot2) {
						// 	that.lots2[t1]['closeTime'] = '';
						// 	for (let t11 in tt.times) {
						// 		if (that.lot2[t1].key == t11) {
						// 			that.lot2[t1]['closeTime'] = tt.times[t11] - tt.now;
						// 		}
						// 	}
						// }
						that.timer();
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		toLotterDetail(code, lotName, lotteryId) {
			let that = this;
			uni.$emit('clearMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: true });
			uni.navigateTo({
				url: '/pages/home/lotdetail/lotdetail?code=' + code + '&name=' + lotName + '&lotteryId=' + lotteryId,
				complete: () => {
					that.$store.commit('setTabbarIndex', -1);
				}
			});
		},
		/**
		 * 首页的公共数据
		 */
		noticeData() {
			let that = this;
			Net.ayiHttp(
				URL.USER_CONTENT,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log(data);
						that.noticeArr = '';
						if (Tools.isEmpty(data + '') || Tools.isEmpty(data)) {
							that.noticeArr = '';
						} else {
							let tempArr = [];
							for (let item in data) {
								tempArr[item] = data[item]['content'];
							}
							that.noticeArr = tempArr.join('');
							that.start();
						}
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		start() {
			this.noticeTimer = setInterval(() => {
				let start = this.noticeArr.substring(0, 1);
				let end = this.noticeArr.substring(1);
				this.noticeArr = end + start;
			}, 250);
		},
		hideSlider(){
			if(this.isShowSwiper){
				this.isShowSwiper=false;
			}else{
				this.isShowSwiper=true;
			}
		}
	},
	onUnload() {
		uni.$off('startMenuTimer');
		uni.$off('isClearTimeOut');
		clearInterval(this.noticeTimer);
	},
	filters: {
		countdown: function(value, isHideHour = false) {
			if (Tools.isEmpty(value)) {
				return '已封盘';
			} else {
				if (isHideHour == true) {
					return Tools.formateTime(value, true);
				}
				return Tools.formateTime(value);
			}
		}
	},
	onTabItemTap(option) {
		let lotterParams = VueTools.getStorageSync(Config.LOTTER_DETAIL_PARAMS);
		if (!Tools.isEmpty(lotterParams) && !Tools.isEmpty(lotterParams.code) && !Tools.isEmpty(lotterParams.name)) {
			this.toLotterDetail(lotterParams.code, lotterParams.name, lotterParams.lotteryId);
			return;
		}
		if (this.$store.state.tabbar_now_index != 2 || this.$store.state.tabbar_now_index != '2') {
			// #ifdef APP-PLUS
			this.Tab.getInstance().show(false);
			// #endif
			this.$store.commit('setTabbarIndex', option.index);
			uni.$emit('clearMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: true });
			uni.$emit('startMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: false });
		}
	},
	onPullDownRefresh(){
		this.getMenuData();
	}
};
</script>

<style lang="scss">
.swiper {
	height: 324rpx;
}
.swiper-item {
	.s-i-img {
		border-radius: 24rpx;
		margin: 0 auto;
		width: 710rpx;
		height: 284rpx;
	}
}
.home-notice {
	height: 68rpx;
	padding: 0rpx 20rpx;
	display: flex;
	line-height: 68rpx;
	border-bottom: 1px solid $wlh-color-defealt;
	.h-n-icon {
		color: $wlh-color-defealt;
	}
	.h-n-content {
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		height: 68rpx;
		.notice-rich-text {
			color: $wlh-color-defealt;
		}
	}
}
.home-tab-menu {
	display: flex;
	height: 68rpx;
	padding: 4rpx 0rpx;
	.h-t-m-item {
		flex: 1;
		display: block;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1px solid #E8E9EC;
		line-height: 60rpx;
		.h-itme-tit{
			padding: 4px 20px;
			border-radius: 30px;
			background: transparent;
			color: #000;
			margin: 4px auto;
			display: inline;
			font-size: 28rpx;
		}
		&.active {
			.h-itme-tit{
				color: #fff;
				background: linear-gradient(to right, #ffe6e4, #ff938c);
			}
		}
	}
}
.uni-grid-item {
	border-bottom: 1px solid #e8e9ec;
}
.hot {
	display: none;
	clear: both;
	&.active {
		display: block;
	}
}
.menu-right-border {
	/* #ifdef H5 */
	border-right: 1px solid #e8e9ec;
	/* #endif */
	/* #ifndef H5 */
	.uni-grid-item {
		border-right: 1px solid #e8e9ec;
	}
	/* #endif */
}
</style>
